<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Weather Widgets</title>
		<link rel="stylesheet" href="./weather.css"/>
	</head>
	<body>
		<svg display="none">
			<symbol id="wind" viewBox="0 0 16 16">
				<g fill="none" stroke="hsl(0,0%,100%)" stroke-linecap="round" stroke-width="2">
					<polyline points="2 3,10 3"></polyline>
					<polyline points="6 8,14 8"></polyline>
					<polyline points="2 13,10 13"></polyline>
				</g>
			</symbol>
			<symbol id="visibility" viewBox="0 0 16 16">
				<g fill="none" stroke="hsl(0,0%,100%)" stroke-width="2">
					<ellipse cx="8" cy="8" rx="7" ry="4"></ellipse>
					<circle cx="8" cy="8" r="2"></circle>
				</g>
			</symbol>
			<symbol id="air-quality" viewBox="0 0 16 16">
				<g fill="hsl(0,0%,100%)">
					<circle cx="4" cy="11" r="2"></circle>
					<circle cx="8" cy="5" r="2"></circle>
					<circle cx="12" cy="11" r="2"></circle>
				</g>
			</symbol>
			<symbol id="humidity" viewBox="0 0 16 16">
				<g fill="none" stroke="hsl(0,0%,100%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
					<path d="M 1 3 C 6 7, 10 0, 15 4" transform="translate(0,-1)"></path>
					<path d="M 1 3 C 6 7, 10 0, 15 4" transform="translate(0,3)"></path>
					<path d="M 1 3 C 3 5, 6 4, 8 3" transform="translate(0,7)"></path>
					<path d="M 4 1 C -3 8, 11 8, 4 1" transform="translate(8,8)"></path>
				</g>
			</symbol>
			<symbol id="sunny" viewBox="0 0 48 48">
				<g stroke="hsl(53,90%,50%)" stroke-linecap="round" stroke-width="4">
					<polyline points="24 24,24 21" transform="rotate(0,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(45,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(90,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(135,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(180,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(225,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(270,24,24) translate(0,-18)"></polyline>
					<polyline points="24 24,24 21" transform="rotate(315,24,24) translate(0,-18)"></polyline>
				</g>
				<circle cx="24" cy="24" r="12" fill="hsl(53,90%,50%)"></circle>
			</symbol>
			<symbol id="cloudy" viewBox="0 0 48 48">
				<g fill="hsl(0,0%,100%)" transform="translate(0,6)">
					<rect x="0" y="12" width="48" height="20" rx="10" ry="10"></rect>
					<circle cx="28" cy="14" r="14"></circle>
					<circle cx="14" cy="10" r="6"></circle>
				</g>
			</symbol>
		</svg>
		<main>
			<details id="widget1" class="widget" open="">
				<summary class="widget__btn">
					<span class="widget__top">
						<span data-stat="city">Harrisburg</span>
						<small class="widget__weather">
							<span data-stat="kind">sunny</span>
							<span class="widget__bull">•</span>
							<time data-stat="time" datetime="11:15">11:15 AM</time>
						</small>
					</span>
					<div class="widget__temp">
						<span data-stat="temperature">88</span><sup>°<span data-stat="temperature_scale">F</span></sup>
					</div>
				</summary>
				<div class="widget__details">
					<svg class="widget__weather-symbol" width="16px" height="16px" aria-hidden="true">
						<use href="#sunny" data-symbol=""></use>
					</svg>
					<span class="widget__detail">
						<small class="widget__detail-name">Wind</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#wind"></use>
							</svg>
							<span data-stat="wind">5 mph</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Visibility</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#visibility"></use>
							</svg>
							<span data-stat="visibility">22 mi</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Air Quality</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#air-quality"></use>
							</svg>
							<span data-stat="air_quality">54</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Humidity</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#humidity"></use>
							</svg>
							<span data-stat="humidity">59</span>
						</span>
					</span>
				</div>
			</details>
			<details id="widget2" class="widget">
				<summary class="widget__btn">
					<span class="widget__top">
						<span data-stat="city">Seattle</span>
						<small class="widget__weather">
							<span data-stat="kind">cloudy</span>
							<span class="widget__bull">•</span>
							<time data-stat="time" datetime="08:15">8:15 AM</time>
						</small>
					</span>
					<div class="widget__temp">
						<span data-stat="temperature">70</span><sup>°<span data-stat="temperature_scale">F</span></sup>
					</div>
				</summary>
				<div class="widget__details">
					<svg class="widget__weather-symbol" width="16px" height="16px" aria-hidden="true">
						<use href="#cloudy" data-symbol=""></use>
					</svg>
					<span class="widget__detail">
						<small class="widget__detail-name">Wind</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#wind"></use>
							</svg>
							<span data-stat="wind">6 mph</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Visibility</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#visibility"></use>
							</svg>
							<span data-stat="visibility">23 mi</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Air Quality</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#air-quality"></use>
							</svg>
							<span data-stat="air_quality">41</span>
						</span>
					</span>
					<span class="widget__detail">
						<small class="widget__detail-name">Humidity</small>
						<br>
						<span class="widget__detail-value">
							<svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true">
								<use href="#humidity"></use>
							</svg>
							<span data-stat="humidity">47</span>
						</span>
					</span>
				</div>
			</details>
		</main>
		<script src="./weather.js"></script>
	</body>
</html>